<template>
<el-container>
  <!-- 头部区域 -->
  <el-header>
    <div>
      <img src="../assets/img/logo.png" alt="">
      <span>电商后台管理系统</span>
    </div>
    <el-button type="info" @click="logout">退出</el-button>
  </el-header>
       <!-- 页面主体区 -->
        <el-container>
          <!-- 侧边栏 -->
          <!-- 通过动态的判断isCollapse的值，查看是否处于折叠状态
               isCollapse = true  开启折叠状态，那么就要把宽度设为 64px
               isCollapse = false 取消折叠状态，将左侧菜单展示出来，那么就把宽度设为200px
           -->
           <el-aside :width="isCollapse ? '64px' : '200px'">
             <!-- 折叠 -->
             <div class="toggle-button" @click="tooggleCollapse">|||</div>
             <!-- 侧边栏菜单区域 -->
             <el-menu
               :router="true"
               :collapse='isCollapse'
               :collapse-transition="false"
               :unique-opened="true"
               background-color="#333744"
               text-color="#fff"
               :default-active="activePath"
               active-text-color="#409BFF">
               <!-- 一级菜单 -->
               <!-- 通过双重for循环来动态的生成每个一级、二级菜单项, -->
               <!-- id值和index值都不能一样，index值一样，那么就打开一个submenu其他的submenu也打开 -->
                <el-submenu :index="item.id.toString()" v-for="(item,i) in menuList" :key="item.id">
                  <!-- 一级菜单的模板区域 -->
                    <template slot="title">
                      <!-- 图标,动态绑定一级图标 -->
                    <i :class="menuIcon[i]"></i>
                    <!-- 文本 -->
                    <span>{{item.authName}}</span>
                  </template>

                  <!-- 二级菜单 -->
                    <!-- index可以作为跳转路由的路径，跳转到该childItem的path路径
                         路由根据childItem的path路径 在router-view位置显示对应的组件
                     -->
                    <el-menu-item 
                    :index="childItem.path"
                     v-for="childItem in item.children" 
                     :key="childItem.id"
                     @click="saveNavState(childItem.path)"
                     >
                      <template slot="title">
                      <!-- 图标 -->
                        <i class="el-icon-menu"></i>
                    <!-- 文本 -->
                        <span>{{childItem.authName}}</span>
                      </template>
                    </el-menu-item>
                </el-submenu>

              </el-menu>
           </el-aside>
           <!-- 右边内容主体区 -->
           <el-main>
             <router-view></router-view>
           </el-main>
        </el-container>
</el-container>
</template>

<script>
export default {
  data() {
    return {
      // 左侧的菜单数据
      menuList:[],
      menuIcon:['el-icon-s-custom','el-icon-s-help','el-icon-s-goods','el-icon-s-order','el-icon-s-data'],
      isCollapse:false, // 是否折叠
      activePath:''  //被激活的二级链接地址
    }
  },
  created(){
    this.getMenuList()
    // 当容器被创建的时候，就对activePath进行赋值
    // 因为路由组件会经常处在创建和销毁状态
    this.activePath = sessionStorage.getItem('activePath')
  },
  
  methods: {
    // 推出功能：主要核心，销毁token，然后强制跳转到login登陆页面
    logout() {
      sessionStorage.clear()
      this.$router.push({ path: '/login' })
    },
    // 通过请求获取左侧所有菜单
   async getMenuList(){
      // 返回promise
     const {data:res} = await this.$http.get('menus')
     if(res.meta.status !== 200){ // 也就是说请求不成功的话
        return this.$message.error(res.meta.msg);
     }
    //  如果请求左侧菜单成功！
     this.menuList = res.data
    },
    // 点击按钮切换菜单的折叠与展开
    tooggleCollapse(){
      // el-menu组件的Collapse属性，可以控制是否折叠
      // 我们动态的为Collapse属性绑定了isCollapse值
      // 也就是说，我们可以通过激活该方法时，达到不断切换menu的折叠与展示
        this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState(activePath){
      // 将被激活的二级路由的path保存到session中
        sessionStorage.setItem('activePath',activePath)
        // 当点击不同的二级链接时，对activePath再次进行不同的赋值
        // 使被激活的二级菜单处在高亮效果
        this.activePath = sessionStorage.getItem('activePath')
    }
  },
}
</script>

<style lang="less" scoped>
/* 每一个elment ui组件，组件的名称就是 组件默认的类名 
   所以我们不需要再给 el-组件 取类名，直接 .组件名称 就能写样式
*/
// el-container组件没有设置高度，所以要让它高度100%
// 里面的aside和main才能撑满全屏(原因：container是flex布局)
.el-container {
  height: 100%;
}
.el-header{
  display: flex;
  justify-content: space-between;
  background-color: #373D41;
  align-items: center;
  padding-left: 0px !important;
  >div {
    display: flex;
    align-items: center;
    img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    }
    span {
      font-size: 20px;
      margin-left: 15px;
      color:white
    }
  }
}
.el-aside {
background-color: #333744;
.el-menu {
  border-right: none;
}
}
.el-main {
  background-color: #EAEDF1;
}
.toggle-button{
    text-align: center;
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color:#fff;
    letter-spacing: 0.2em;  // 每个文字的间距
    cursor: pointer; // 经过时，鼠标变成小手
}
</style>